{// class game2048{
    //    constructor(){
    //        // 类声明的时候会用到的函数
    //        console.log(this.init); //先有函数
    //        console.log(this.abc) ; //undefined 

    //        this.abc=123
    //    }
    //    // 这里是写函数的位置
    //    init(){
    //        console.log('init函数')
    //    }
    // }
    // var a = new game2048(); //返回一个对象
    ///////////////////////////////////////////
    // 内部的大概实现
    // a={};
    // 把所有函数都放到a身上
    // a == {
    //     init:fn
    // }
    // 在函数放上去之后就会执行constructor
    // 注意 constructor函数执行的时候 this一定指向于a



    //剩下的18
    //  标签元素第一个要认识的
    //  标签元素.offsetLeft 表示子元素左边框和父元素左边框的距离
    //  标签元素.offsetTop 表示子元素上边框和父元素上边框的距离

}

class Data {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}


class Game2048 {
    constructor() {
        this.mark=0
        this.score_box= document.querySelector('.score');
        // this -> 实例化对象a
        this.arr = [];
        //你们发挥的地方 获取元素的坐标
        // console.log(document.querySelectorAll('.kuai')[15].offsetLeft);
        // console.log(document.querySelectorAll('.kuai')[15].offsetTop);
        let num = document.querySelectorAll('.kuai');
        this.father = document.querySelector('#background_box');
        this.init(num);
        this.index = 0; //用来记录当前生成了多少个元素
    }
    init(num) {
        for (let index = 0; index < num.length; index++) {
            var x = num[index].offsetLeft
            var y = num[index].offsetTop
            this.arr[index] = new Data(x, y)
        }
    }
    add(index) {
        { //这个函数接受一个index的值 index值表示从左到右 从上到下 由0开始
            // 提示 
            // this.arr[index].x  this.arr[index].y 就是我们的一个坐标
            // this指向于a
            // constructor() {
            //  this.father=document.querySelector('#background_box');
            // }
            //你要创建一个box类名的元素 将他加入到id为background_box的盒子内部
        }
        if (this.arr[index].ele) {
            console.log('已经有格子了 不能在这里添加')
            return
        }
        // 浏览器渲染页面的时候有2种
        //  重排 css样式属性变化的时候 涉及布局变化 就会触发浏览的一个重排 把整一个页面的排版重新计算一遍
        //  重绘 不会影响当前布局 css样式变化的时候 类似的背景颜色变化
        // 这些样式改变会触发重绘
        // 浏览为了优化 重绘在一定时间内只会执行一次
        // 重排会强制的触发重绘
        var a = document.createElement('div');
        a.classList.add('box');
        a.style.top = this.arr[index].y + 'px';
        a.style.left = this.arr[index].x + 'px';
        a.style.transform = 'scale(0)'
        this.arr[index].ele = a;
        // 把创建的标签存入数组对应的位置
        this.father.append(a);
        this.index += 1;
        // setTimeout(fn,time)
        // fn 表示时间到了之后要执行的函数 ,time单位ms等待时间是多少
        //这这个位置上通过获取某个元素的宽度来强制触发重排
        //从而触发重绘
        document.querySelector('.kuai').clientWidth;
        a.style.transform = 'scale(1)'
        // 要求刚好覆盖 下标为index的盒子

        // 任务2
        // 改造add这个函数
        // 在我点击红色块的时候 触发一个a.click
        //要注意 触发函数的this要指向实例化a
        a.onclick = this.click.bind({
            game:this,
            index:index
        });

        // 20201/6/28 任务1
        // 生成后如果过了2s还没有点击到那么就移除自身并扣10分
        this.arr[index].time=setTimeout((function(){
            a.remove(); 
            this.index--;
            this.arr[index].ele=undefined
            this.score_box.innerText='分数:'+(this.mark-=10)
        }.bind(this)),2000)



    }
    random() {
        // console.log(555,this)
        // 在  constructor 添加一行 this.index=0
        // 在 add() 里面 在append之后 添加 this.index+=1
        if (this.index == 16) {
            console.log('已经满了无法随机添加');
            return
        }
        // 随机0-15数字出来
        Math.random() * 15;
        // 不需要任何参数 [0-1) 取不到1
        // 返回 [0-1)的浮点数
        // Math.round(number);
        // 将传入的数字 四舍五入到整数
        var num = Math.round(Math.random() * 15);
        while (this.arr[num].ele) {
            // 如果这里已经有元素在了我们就重新生成一个num
            console.log('随机到一个相同的重新生成')
            num = Math.round(Math.random() * 15);
        }
        // 能够获取 [0-15]整数
        this.add(num)
    }
    click (e) {
        clearTimeout(this.game.arr[this.index].time);
        console.log(123,this);
        // 我点击哪一个就移除红色模块
        // 移除之后空白的位置还是能够生成新的模块
        // 提示
        // e.target 就是你点击的标签元素
        // 标签元素.remove() 就能把自身移除出网页
        e.target.remove();
        this.game.index-=1;
        this.game.arr[this.index].ele=undefined
        this.game.score_box.innerText='分数:'+(this.game.mark+=10)
    }

}

var a = new Game2048();

// 任务一
// 代码1
// 写一个定时器 每1s执行a.random()
// 提示这里除了写一个定时器还需要写一个函数

// 每隔一秒注册定时器
function time() {
    // console.log(123)
    a.random.bind(a)()
    //函数里面又会注册一个定时
    setTimeout(time, Math.random()*1000)
}
// time();


// 代码1

// setTimeout(fn,time)
// 到达时间time执行fn

// 函数.bind(运行需要this指向的对象)






